<template>
  <div class="screen-container" :style="containerStyle">
    <header class="screen-header">
      <div>
        <img :src="headerSrc" alt="" />
      </div>
      <span class="title" :style="containerStyle">某教育平台线上课程数据可视化</span>
      <div class="title-right">
        <img :src="themeSrc" class="qiehuan" @click="handleChangeTheme" />
      </div>
    </header>
    <div class="screen-body">
      <section class="screen-left">
        <div
          id="left-top"
          :class="[fullScreenStatus.popular_course ? 'fullscreen' : '']"
        >
          <!-- 最受欢迎前十课程图表 -->
          <PopularCourse ref="popular_course"></PopularCourse>
          <div class="resize">
            <!-- icon-compress-alt -->
            <span
              @click="changeSize('popular_course')"
              :class="[
                'iconfont',
                fullScreenStatus.popular_course
                  ? 'icon-compress-alt'
                  : 'icon-expand-alt',
              ]"
            ></span>
          </div>
        </div>
        <div
          id="left-center"
          :class="[fullScreenStatus.foregin_country ? 'fullscreen' : '']"
        >
          <!-- 国外用户分布图表 -->
          <ForeignCountry ref="foregin_country"></ForeignCountry>
          <div class="resize">
            <!-- icon-compress-alt -->
            <span
              @click="changeSize('foregin_country')"
              :class="[
                'iconfont',
                fullScreenStatus.foregin_country
                  ? 'icon-compress-alt'
                  : 'icon-expand-alt',
              ]"
            ></span>
          </div>
        </div>
        <div
          id="left-bottom"
          :class="[fullScreenStatus.lose_user ? 'fullscreen' : '']"
        >
          <!-- 流失用户流失天数情况图表 -->
          <Loseuser ref="lose_user"></Loseuser>
          <div class="resize">
            <!-- icon-compress-alt -->
            <span
              @click="changeSize('lose_user')"
              :class="[
                'iconfont',
                fullScreenStatus.lose_user
                  ? 'icon-compress-alt'
                  : 'icon-expand-alt',
              ]"
            ></span>
          </div>
        </div>
      </section>
      <section class="screen-middle">
        <div
          id="middle-top"
          :class="[fullScreenStatus.province_login ? 'fullscreen' : '']"
        >
          <!-- 各省用户活跃度分布地图 -->
          <ProvinceMap ref="province_login"></ProvinceMap>
          <div class="resize">
            <!-- icon-compress-alt -->
            <span
              @click="changeSize('province_login')"
              :class="[
                'iconfont',
                fullScreenStatus.province_login
                  ? 'icon-compress-alt'
                  : 'icon-expand-alt',
              ]"
            ></span>
          </div>
        </div>
        <div
          id="middle-bottom"
          :class="[fullScreenStatus.workhoilday ? 'fullscreen' : '']"
        >
          <!-- 工作日和非工作日活跃度图表 -->
          <WorkHoilday ref="workhoilday"></WorkHoilday>
          <div class="resize">
            <!-- icon-compress-alt -->
            <span
              @click="changeSize('workhoilday')"
              :class="[
                'iconfont',
                fullScreenStatus.workhoilday
                  ? 'icon-compress-alt'
                  : 'icon-expand-alt',
              ]"
            ></span>
          </div>
        </div>
      </section>
      <section class="screen-right">
        <div
          id="right-top"
          :class="[fullScreenStatus.userlogin ? 'fullscreen' : '']"
        >
          <!-- 用户登录前五（省、市、学校）图表 -->
          <UserLogin ref="userlogin"></UserLogin>
          <div class="resize">
            <!-- icon-compress-alt -->
            <span
              @click="changeSize('userlogin')"
              :class="[
                'iconfont',
                fullScreenStatus.userlogin
                  ? 'icon-compress-alt'
                  : 'icon-expand-alt',
              ]"
            ></span>
          </div>
        </div>
        <div
          id="right-center"
          :class="[fullScreenStatus.select_course ? 'fullscreen' : '']"
        >
          <!-- 用户参与选课情况图表 -->
          <SelectCourse ref="select_course"></SelectCourse>
          <div class="resize">
            <!-- icon-compress-alt -->
            <span
              @click="changeSize('select_course')"
              :class="[
                'iconfont',
                fullScreenStatus.select_course
                  ? 'icon-compress-alt'
                  : 'icon-expand-alt',
              ]"
            ></span>
          </div>
        </div>
        <div
          id="right-bottom"
          :class="[fullScreenStatus.process_price ? 'fullscreen' : '']"
        >
          <!-- 课程价格与平均学习进度关系图表 -->
          <ProcessPrice ref="process_price"></ProcessPrice>
          <div class="resize">
            <!-- icon-compress-alt -->
            <span
              @click="changeSize('process_price')"
              :class="[
                'iconfont',
                fullScreenStatus.process_price
                  ? 'icon-compress-alt'
                  : 'icon-expand-alt',
              ]"
            ></span>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import ForeignCountry from "@/components/Foreign_Country.vue";
import Loseuser from "@/components/Lose_user.vue";
import PopularCourse from "@/components/PopularCourse.vue";
import ProvinceMap from "@/components/ProvinceMap.vue";
import SelectCourse from "@/components/SelectCourse.vue";
import UserLogin from "@/components/UserLogin.vue";
import ProcessPrice from "@/components/ProcessPrice.vue";
import WorkHoilday from "@/components/WorkHoilday.vue";
import { mapState } from "vuex";
import { getThemeValue } from "@/utils/theme_utils";
export default {
  name: "Index",
  data() {
    return {
      // 定义每一个图表的全屏状态
      fullScreenStatus: {
        popular_course: false,
        foregin_country: false,
        lose_user: false,
        province_login: false,
        workhoilday: false,
        userlogin: false,
        select_course: false,
        process_price: false,
      },
    };
  },
  components: {
    ForeignCountry,
    Loseuser,
    PopularCourse,
    ProvinceMap,
    SelectCourse,
    UserLogin,
    ProcessPrice,
    WorkHoilday,
  },
  created() {
    // 注册接收到数据的回调函数
    this.$socket.registerCallBack("fullScreen", this.recvData);
    this.$socket.registerCallBack("themeChange", this.recvThemeChange);
    
  },
  methods: {
    changeSize(chartName) {
      // 1.改变fullScreenStatus的数据
      // this.fullScreenStatus[chartName] = !this.fullScreenStatus[chartName]
      // 2.需要调用每一个图表组件的screenAdapter的方法
      // this.$refs[chartName].screenAdapter()
      // this.$nextTick(() => {
      //   this.$refs[chartName].screenAdapter()
      // })
      // 将数据发送给服务端
      const targetValue = !this.fullScreenStatus[chartName];
      this.$socket.send({
        action: "fullScreen",
        socketType: "fullScreen",
        chartName: chartName,
        value: targetValue,
      });
    },
    // 接收到全屏数据之后的处理
    recvData(data) {
      // 取出是哪一个图表需要进行切换
      const chartName = data.chartName;
      // 取出, 切换成什么状态
      const targetValue = data.value;
      this.fullScreenStatus[chartName] = targetValue;
      this.$nextTick(() => {
        this.$refs[chartName].screenAdapter();
      });
    },
    handleChangeTheme() {
      // 修改VueX中数据
      // this.$store.commit('changeTheme')
      this.$socket.send({
        action: "themeChange",
        socketType: "themeChange",
        chartName: "",
        value: "",
      });
    },
    recvThemeChange() {
      this.$store.commit("changeTheme");
    },
  },
  computed: {
    headerSrc() {
      return "/static/utils/img/" + getThemeValue(this.theme).headerBorderSrc;
    },
    themeSrc() {
      return "/static/utils/img/" + getThemeValue(this.theme).themeSrc;
    },
    containerStyle() {
      return {
        backgroundColor: getThemeValue(this.theme).backgroundColor,
        color: getThemeValue(this.theme).titleColor,
      };
    },
    ...mapState(["theme"]),
  },
  destroyed() {
    this.$socket.unRegisterCallBack("fullScreen");
    this.$socket.unRegisterCallBack("themeChange");
    if (this.formatDate) {
      clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
    }
  },
};
</script>

<style lang="less" scoped>
// 全屏样式的定义
.fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  z-index: 100;
}

.screen-container {
  width: 100%;
  height: 100%;
  padding: 0 20px;
  background-color: #161522;
  box-sizing: border-box;
  overflow: auto;
}
.screen-header {
  width: 100%;
  height: 64px;
  font-size: 20px;
  position: relative;
  > div {
    img {
      width: 100%;
    }
  }
  .title {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 30px;
    transform: translate(-50%, -50%);
    font-weight: bold;
  }
  .title-right {
    display: flex;
    align-items: center;
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-80%);
  }
  .qiehuan {
    width: 28px;
    height: 21px;
    cursor: pointer;
  }
  .datetime {
    font-size: 15px;
    margin-left: 10px;
  }
}
.screen-body {
  width: 100%;
  height: 100%;
  display: flex;
  margin-top: 10px;
  .screen-left {
    height: 100%;
    width: 27.6%;
    #left-top {
      height: 31%;
      position: relative;
    }
    #left-center {
      height: 31%;
      margin-top: 25px;
      position: relative;
    }
    #left-bottom {
      height: 31%;
      margin-top: 25px;
      position: relative;
    }
  }
  .screen-middle {
    height: 100%;
    width: 41.5%;
    margin-left: 1.6%;
    margin-right: 1.6%;
    #middle-top {
      width: 100%;
      height: 56%;
      position: relative;
    }
    #middle-bottom {
      margin-top: 25px;
      width: 100%;
      height: 40%;
      position: relative;
    }
  }
  .screen-right {
    height: 100%;
    width: 27.6%;
    #right-top {
      height: 32%;
      position: relative;
    }
    #right-center {
      height: 30%;
      margin-top: 25px;
      position: relative;
    }
    #right-bottom {
      height: 30%;
      margin-top: 25px;
      position: relative;
    }
  }
}
.resize {
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
}
</style>